<template>


  <div v-show="mesft" id="messageBoxNei" class="res kou bsa koyleBon">

    <img src="../../assets/bigdataStyle4/images/messageBoxClose.svg" alt="" class="messageBoxClose abs souba bhot" @click="closeTop()">

    <!-- <div style="height: 65px;"></div> -->

    <div class="mnsNei">
      <div class="message_lie t-line-box res flo_l" @click="triggerFire">
        <span class="tipNum abs" @click="triggerMesLie('fire')" @click.stop="">{{fireNum}}</span>
        <div class="message_lie_tit res"><span>火警</span></div>
        <div class="message_text">
          <el-tooltip effect="dark" :content="fireMesText" placement="bottom-end">
            <div class="wraps2" style="text-align: center;">{{fireMesText}}</div>
          </el-tooltip>
        </div>
        <slot></slot>
      </div>
      <div class="message_lie t-line-box res flo_l" @click="triggerCloseVideo">
        <span class="tipNum abs" @click="triggerMesLie('water')">{{waterNum}}</span>
        <div class="message_lie_tit res"><span>水预警</span></div>
        <div class="message_text">
          <el-tooltip effect="dark" :content="waterNumText" placement="bottom-end">
            <div class="wraps2" style="text-align: center;">{{waterNumText}}</div>
          </el-tooltip>
        </div>
        <slot></slot>
      </div>
      <div class="message_lie t-line-box res flo_l" @click="triggerCloseVideo">
        <span class="tipNum abs" @click="triggerMesLie('yb')">{{ybNum}}</span>
        <div class="message_lie_tit res"><span>电气火灾预警</span></div>
        <div class="message_text">
          <el-tooltip effect="dark" :content="ybNumText" placement="bottom-end">
            <div class="wraps2" style="text-align: center;">{{ybNumText}}</div>
          </el-tooltip>
        </div>
        <slot></slot>
      </div>
      <div class="message_lie t-line-box res flo_l" @click="triggerCloseVideo">
        <span class="tipNum abs" @click="triggerMesLie('fault')">{{faultNum}}</span>
        <div class="message_lie_tit res"><span>故障</span></div>
        <div class="message_text">
          <el-tooltip effect="dark" :content="faultNumText" placement="bottom-end">
            <div class="wraps2" style="text-align: center;">{{faultNumText}}</div>
          </el-tooltip>
        </div>
        <slot></slot>
      </div>
      <div class="message_lie t-line-box res flo_l" @click="triggerDlyg">
        <span class="tipNum abs" @click="triggerMesLie('dlyg')" @click.stop="">{{dlygNum}}</span>
        <div class="message_lie_tit res"><span>独立烟感</span></div>
        <div class="message_text">
          <el-tooltip effect="dark" :content="dlygNumText" placement="bottom-end">
            <div class="wraps2" style="text-align: center;">{{dlygNumText}}</div>
          </el-tooltip>
        </div>
        <slot></slot>
      </div>
      <div class="message_lie t-line-box res flo_l" @click="triggerKrqt">
        <span class="tipNum abs" @click="triggerMesLie('krqt')" @click.stop="">{{krqtNum}}</span>
        <div class="message_lie_tit res"><span>可燃气体</span></div>
        <div class="message_text">
          <el-tooltip effect="dark" :content="krqtNumText" placement="bottom-end">
            <div class="wraps2" style="text-align: center;">{{krqtNumText}}</div>
          </el-tooltip>
        </div>
        <slot></slot>
      </div>
      <div class="clearBoth"></div>
    </div>

  </div>
</template>

<script>
  export default {
    props:{
      fireNum:{
        type:Number,
        default:0
      },
      fireId:{
        type:String,
        default:""
      },
      dlygId:{
        type:String,
        default:""
      },
      krqtId:{
        type:String,
        default:""
      },
      waterNum:{
        type:Number,
        default:0
      },
      ybNum:{
        type:Number,
        default:0
      },
      faultNum:{
        type:Number,
        default:0
      },
      dlygNum:{
        type:Number,
        default:0
      },
      krqtNum:{
        type:Number,
        default:0
      },
      fireMesText:{
        type:String,
        default:""
      },
      waterNumText:{
        type:String,
        default:""
      },
      ybNumText:{
        type:String,
        default:""
      },
      faultNumText:{
        type:String,
        default:""
      },
      dlygNumText:{
        type:String,
        default:""
      },
      krqtNumText:{
        type:String,
        default:""
      },
      messageLieRefsh:{
        type:Function,
        default:null
      },
      closeMesMusic:{
        type:Function,
        default:null
      }
    },
    data() {
      return{
        msgFire:"唐山消防云监控中心发来一条火警消息，请及时查看！",
        msgWater:"唐山消防云监控中心发来一条水报警消息，请及时查看！",
        msgYb:"唐山消防云监控中心发来一条预警消息，请及时查看！",
        msgFault:"唐山消防云监控中心发来一条故障消息，请及时查看！",
        updated:false,
        update:false,
        mesft:true
      }
    },
    mounted() {
      let _that=this;
      //消防信息弹窗组件自动关闭
      $(window).click(function(){
        //_that.mesft=false;
        //_that.closeMesMusic();
      });

    },
    methods:{
      closeTop(){
        this.mesft=false;
        this.closeMesMusic();
      },
      uPd(flag){
        this.updated=flag;
        this.$forceUpdate();
        this.mesft=true;
      },
      refh(flag){
        this.update=flag;
      },
      triggerFire(){
        this.closeMesMusic();
        if(this.fireNum>0){
          this.$emit("showFire",this.fireId);
        }

      },
      triggerDlyg(){
        this.closeMesMusic();
        if(this.dlygNum>0) {
          this.$emit("showDlyg", this.dlygId);
        }
      },
      triggerKrqt(){
        this.closeMesMusic();
        if(this.krqtNum>0) {
          this.$emit("showKrqt", this.krqtId);
        }
      },
      triggerCloseVideo(){
        this.closeMesMusic();
      },
      triggerMesLie(flag){
        this.closeMesMusic();
        if(this.messageLieRefsh){
          if(flag=="fire" && this.fireNum>0){
            this.messageLieRefsh(flag);
          }else if(flag=="water" && this.waterNum>0){
            this.messageLieRefsh(flag);
          }else if(flag=="yb" && this.ybNum>0){
            this.messageLieRefsh(flag);
          }else if(flag=="fault" && this.faultNum>0){
            this.messageLieRefsh(flag);
          }else if(flag=="dlyg" && this.dlygNum>0){
            this.messageLieRefsh(flag);
          }else if(flag=="krqt" && this.krqtNum>0){
            this.messageLieRefsh(flag);
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  $backgroundColor:#19213e;
  $backgroundColorHover:#101528;
  $basicBorder:1px solid #393E50;
  $basicBorderHover:1px solid #81B4FF;;
  #messageBoxNei{
    height: auto;
    position: fixed;
    right:10px;
    bottom: 10px;
    /* box-shadow: 0 1px 3px rgb(0 0 0 / 30%); */
    z-index: 999;
    width: 402px;
    border-radius: 8px;
    background:url(../../assets/bigdataStyle4/images/messageBoxBg.svg);
    background-size: cover;
    background-position: left top;
    padding:0px 20px;
    box-sizing: content-box;
    box-shadow: 0 0 10px rgba(38, 49, 96, 0.3800);
    & .message_lie{
      width: 193px;
      height: 90px;
      margin-right: 15px;
      margin-bottom: 15px;
      box-sizing: border-box;
      border: $basicBorder;
      border-radius: 4px;
      /* box-shadow: 0 0 10px rgba(38, 49, 96, 0.3800); */
      background: $backgroundColor;
      transition: all 0.05s ease-in-out;
      position: relative!important;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      cursor: pointer;
      box-shadow: none!important;
      .message_text{
        padding: 0 10px;
        color: #D3D7E6;
        padding-top: 9px;
        line-height: 20px;
        letter-spacing: 1px;
      }
      .tipNum{
        display: block;
        height: 22px;
        line-height: 22px;
        background: #ff0000;
        text-align: center;
        min-width: 22px;
        border-radius: 50%;
        right: -7px;
        top: -9px;
        color: #fff;
        font-size: 0.12rem;
        z-index: 9999;
        padding: 0 1px;
      }
      .corners{
        box-shadow: none!important;
      }
      .message_lie_tit{
        text-align: center;
        margin-top:9px;
        margin-bottom: 6px;
      }
      .message_lie_tit{
        text-align: center;
        margin-top:9px;
        margin-bottom: 6px;
        & span{
          letter-spacing: 2px;
          padding: 0.01rem 0.2rem;
          font-size: .12rem;
          color: #81B4FF;
        }
      }
      .message_lie_tit:before{
        content: "";
        position: absolute;
        left: 50%;
        bottom: -6px;
        transform: translate(-50%,0);
        width: 80%;
        height: 1px;
        background: url(../../assets/bigdataStyle4/images/messageBoxLine.svg);
        background-size: 100% auto;
        overflow: hidden;
      }
      .message_lie_tit:after{
        position: absolute;
        width: 26%;
        height: 1px;
        background: rgba(25, 186, 139, .2);
        content: "";
        top: 7px;
        right: 10px;
        display: none;
      }
    }
    & .message_lie:nth-child(2n){
      margin-right: 0;
    }
    .message_lie:hover{
      background: $backgroundColorHover;
      border: $basicBorderHover;
    }
    .messageBoxClose{
      right: 0;
      top: 9px;
      white-space: inherit;
      nav-down: auto;
      background-position: bottom;
      empty-cells: initial;
      width: 32px;
      cursor: pointer;
      opacity: 0.8;
      transition: all 0.1s ease-in-out;
    }
    .messageBoxClose{
      right: 0;
      top: 9px;
      white-space: inherit;
      nav-down: auto;
      background-position: bottom;
      empty-cells: initial;
      width: 32px;
      cursor: pointer;
      opacity: 0.8;
      transition: all 0.1s ease-in-out;
    }
    .messageBoxClose:hover{
      opacity: 1;
    }
    .mnsNei{
      padding-top: 45px;
      padding-bottom: 15px;
    }
  }
  .el-tooltip__popper{
    z-index: 9999999999!important;
  }
</style>
